<template>
  <div class="hotelWrapper">
    <!-- 标题 -->
    <div class="top">
      <h1>大理泰和居客栈(Taiheju lnn)</h1>
      <span>
        <em><em>*</em></em
        >为必填选项</span
      >
    </div>

    <div class="evaluate">
      <el-form class="demo-ruleForm">
        <div class="overallEvaluation" style="margin: 10px 0">
          <label for=""><em>*</em>总体评价</label>
          <el-rate v-model="value1" show-text :texts="texts"> </el-rate
          ><span>点击星星打分</span>
        </div>
        <div class="overallEvaluation">
          <label><em>*</em>位置</label>
          <el-rate v-model="value2" show-text :texts="texts"> </el-rate>
          <span>给位置打分</span>
        </div>
        <div class="overallEvaluation">
          <label><em>*</em>清洁度</label>
          <el-rate v-model="value3" show-text :texts="texts"> </el-rate
          ><span>给清洁度打分</span>
        </div>
        <div class="overallEvaluation">
          <label><em>*</em>设施</label>
          <el-rate v-model="value4" show-text :texts="texts"> </el-rate
          ><span>给设施打分</span>
        </div>
        <div class="overallEvaluation">
          <label><em>*</em>服务</label>
          <el-rate v-model="value5" show-text :texts="texts"> </el-rate
          ><span>给服务打分</span>
        </div>
        <div class="overallEvaluation">
          <label><em>*</em>舒适度</label>
          <el-rate v-model="value6" show-text :texts="texts"> </el-rate
          ><span>给舒适度打分</span>
        </div>
        <div class="overallEvaluation">
          <label><em>*</em>餐饮</label>
          <el-rate v-model="value7" show-text :texts="texts"> </el-rate
          ><span>给餐饮打分</span>
        </div>
        <div class="hotelContent overallEvaluation">
          <label> <em>*</em>内容</label>
          <div>
            <textarea
            
              v-model="content"
              name=""
              id="textarea"
              cols="100"
              rows="5"
              placeholder="100字以上,有机会评为优质点评哦!"
            ></textarea>
            <div class="otherSize">内容不超过10000字</div>
          </div>
        </div>

        <!-- 提交发布按钮 -->
        <div class="overallEvaluation">
          <label></label>
          <el-form-item class="submit">
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: null,
      value2: null,
      value3: null,
      value4: null,
      value5: null,
      value6: null,
      value7: null,
      value: null,
      texts: ["极差", "失望", "一般", "满意", "非常满意"],
      content: "",
      
    };
  },
  methods: {
    onSubmit() {
      this.$axios({
        method: "POST",
        url: "/comments",
        headers: {
          Authorization: "Bearer " + this.$store.state.user.userInfo.token,
        },
        data: {
          content: this.content,
          hotel: this.$route.query.id,
        },
      }).then((res) => {
        console.log(res.data);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.hotelWrapper {
  margin: 0 auto;
  padding: 40px;
  width: 950px;
  height: 500px;
  .top {
    display: flex;
    align-items: center;
    margin-bottom:20px ;
    h1 {
      padding-right: 10px;
      font-size: 22px;
      font-weight: 400;
      color: #444;
    }
    span {
      font-size: 16px;
      color: #666;
    }
  }
  .evaluate {
    .overallEvaluation {
      display: flex;
      align-items: center;
      span {
        margin-left: 30px;
        color: #999;
        padding-left: 10px;
        font-size: 12px;
      }
    }
    .hotelContent {
      display: flex;
      margin-top:8px ;
      #textarea {
        padding: 10px;
        width: 600px;
        background-color: #efefef;
        border: none;
        outline-color: #ffa800;
       resize:none;
      }
    }
    label {
      width: 90px;
      padding-right: 14px;
      font-size: 14px;
      color: #666666;
      margin: 5px 10px;
      text-align: right;
    }
    .uplpadImg {
      display: flex;
    }
  }
  .otherSize {
    font-size: 12px;
    padding: 5px 0;
    color: #999;
  }
  /deep/.el-button {
    margin-right: 20px;
    width: 130px;
    height: 36px;
    border: none;
    border-radius: 2px;
    background-color: #ffa800;
  }
}
em {
  font-style: normal;
  color: #ea3c1a;
}
.el-rate {
  width: 200px;
}
</style>